<template>
	<view class="">
		<view class="info-wap">
			<view class="info-text">
				<text>行业资讯</text>
				<view class="info-dw" @click="childMethod()">
					<!-- <u-icon name="reload" color="#d75150" size="30"></u-icon> -->
					<u-icon name="ziyuan" custom-prefix="custom-icon" color="#d75150" size="26"></u-icon>
					<text >换一批</text>
				</view>
			</view>
		</view>
		<view class="info_logos">
			<view class="info_list_box" v-for="(item,index) in info" :key="index" @click="goHomeInfoDetail(item)">
				<view class="info_title">
					<view class="info_text">
						{{item.title}}
					</view>
					<view class="infor_title_botm">
						<text class="infor_time">{{$u.timeFormat(item.createtime, 'yyyy年mm月dd日')}}</text>
					</view>
				</view>
				<view class="info-img">
						<image :src="item.img" mode="aspectFill"></image>
				</view>
			
			</view>
		</view>
		<view class="btn-warp">
			<u-button type="error" shape="circle" @click="childMethod()"
			:custom-style="{'background':'#C00000'}" >换一批</u-button>
		</view>
	</view>
	
</template>

<script>
	export default {
		props: {
			info: {
				type: Array,
				default () {
					return []
				}
			}
		},
		methods:{
			 childMethod() {
				this.$emit('fatherMethod');
			  },
			goHomeInfoDetail(item){
				uni.navigateTo({
					url:"/pages/index/homeInfo-detail/homeInfo-detail?id=" + item.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.info-wap {
		padding: 40rpx 30rpx;
		background-color: #fff;
		.info-text {
			display: flex;
			justify-content: space-between;
			align-items: center;
			>text {
				font-size: 34rpx;
				font-weight: bold;
				color: #000000;

			}

			.info-dw {
				text {
					margin-left: 10rpx;
					font-size: 24rpx;
					color: #000;
					font-weight: bold;
				}
			}
		}

	
	}
	.info_logos {
		background-color: #fff;
		.info_list_box {
			display: flex;
			margin-bottom: 43rpx;
			border-bottom: 2rpx #E5E5E5 solid;
			padding: 0 30rpx 26rpx 30rpx;
			&:last-child{
				margin-bottom: 0rpx;
				border-bottom: none;
			}
			.info_title {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
	
				.info_text {
					margin-bottom: 30rpx;
					font-size: 28rpx;
					color: #333333;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
	
				.infor_title_botm {
					font-size: 24rpx;
					color: #999999;
					
					.infor_author {
						margin-right: 37rpx;
					}
					.infor_time{
						margin-bottom: 10rpx;
					}
				}
			}
			.info-img{
				overflow: hidden;
				width: 190rpx;
				height:126rpx;
				border-radius: 16rpx;
				border: 1rpx solid #dfdfdf;
				image {
					margin-left: 28rpx;
					width: 190rpx;
					height:126rpx;
					margin: auto 0;
				}
			}
		
		}
	
	}
	.btn-warp{
		width: 100%;
		padding: 100rpx;
		// box-sizing: border-box;
		background-color: #fff;
	}
</style>
